import { Table } from 'antd';
import React, { Component, Fragment } from 'react';
import styles from './index.less';

const handleData = (data, keyName) => {
  let result = ''
  data.forEach(v => {
    if (v.hasOwnProperty(keyName)) {
      result = v[keyName]
    }
  })
  return result
}

/**
 * 
 * keypath
 *  @example
 *    subs.subs.subs
 * 
 * config
 *  @example
 *    {
 *      columns: [],
 *      subs: {
 *        columns: [],
 *        subs: {}
 *      }
 *    }
 * 
 * data
 *  @example
 *    [
 *      {
 *        subs: [
 *          {
 *            subs: [
 *              {
 *                subs: [
 *                  { ... }
 *                ]
 *              }
 *            ]
 *          }
 *        ]
 *      }
 *    ]
 */
const NestedTable = props => {
  const { config, data } = props;

  // 下级菜单
  const keypath = 'subs';
  const expandedRowRender = (config, data, keyName) => {
    const columns = config.columns;
    const currentData = data[keyName]; // subs 是定制的，需要用keypath来实现
    const expendProps = {
      columns,
      dataSource: currentData,
      pagination: false,
    }
    if (config.subs) { // 如果是buildings，则进入第三级
      expendProps.expandedRowRender = () => expandedRowRender(config.subs, currentData, keyName)
    }
    return <Table {...expendProps} />;
  };

  // 最外层一级菜单
  const columns = config.columns;
  const dataSource = data && data.items ? data.items : data;
  return (
    <Table
      className="components-table-demo-nested"
      columns={columns}
      expandedRowRender={record => expandedRowRender(config.subs, record, keypath)}
      dataSource={dataSource}
      // expandedRowKeys={dataSource.map(item => item.id)}
    />
  );
}

export default NestedTable;
